<template>
  <header>{{ title  }}</header>
</template>

<script>
import { computed, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'Header',
  setup (props) {
    const route = useRoute()
    const oAllTitles = {
      'Todo': '写点要做的事情吧！',
      'Calender': '查查日历吧！',
      'Weather': '查查天气吧！',
      'QRCode': '把想说的话转成二维码!'
    }
    const title = ref('')
    watch(route, () => {
      title.value = oAllTitles[route.name] || '没匹配到'
    })

    return {
      title
    }
  }
}

</script>

<style scoped>
header {
  height: 40px;
  line-height: 40px;
  font-size: 26px;
  background-color: rgb(226, 123, 54);
  text-align: center;
  padding-top: 6px;
}
</style>
